<script setup lang="ts">
import Amount from './Amount.vue';
import History from './History.vue';
import { handleShare, useList } from './hooks';

const emits = defineEmits<{
  close: [];
}>();

const authed = useAuthed();
const { difference, status } = useList();
function onShare() {
  handleShare(status?.value?.withdraw_status);
  emits('close');
}
</script>

<template>
  <div>
    <div class="flex flex-col gap-4">
      <TCard class="invitetion-spin-card px-5 text-center !shadow-none">
        <p class="mb-3 text-lg text-white">
          {{ $t('r1BeITt2jU32oooGuvZy') }}
        </p>
        <p class="mb-3.5 text-sm text-sys-text-body">
          {{ $t('jPYcYnmWiUh4rh2ogNte') }}
        </p>
        <Amount class="mb-3" />
        <I18nT v-if="difference > 0 && authed" keypath="agTwCh4pZ9FkrKsXbcHe" tag="p" class="text-sys-text-body">
          <template #diff>
            <TNum class="text-yellow-500" format="clamp-dec" :decimals="2" :value="difference" />
          </template>
        </I18nT>
        <p v-if="difference <= 0">
          {{ $t('czXyKhorDqV_4Fvqigcar') }}
        </p>
      </TCard>
      <AButton type="primary" class="ant-cover__Button-3d-primary" block @click="onShare">
        {{ authed && status?.withdraw_status !== 2 ? $t('th6i8V2lozjJ2MqulTsln') : $t('nKx0FJevkElHhHKns8aK') }}
      </AButton>
      <History />
    </div>
  </div>
</template>

<style lang="scss">
.ant-modal-wrap.ant-cover__Modal-invited-results {
  .ant-modal {
    .ant-modal-content {
      top: -62px;
    }
  }
}
</style>
